import React from 'react';
import i18n from '@ohif/i18n';
import { Select } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';

const { availableLanguages } = i18n;

function LanguageSwitcher(props) {
  const { t } = props;
  const onChange = lng => i18n.changeLanguage(lng);
  const defaultLng = localStorage.getItem("i18nextLng");

  return (
    <Select defaultValue={defaultLng} onChange={onChange} style={{width: 100}} suffixIcon={<GlobalOutlined />}>
      {availableLanguages.map(l => {
        return (<Select.Option key={l.value} value={l.value}>
          {t(l.label)}
          </Select.Option>);
      })}
    </Select>
  );
}

LanguageSwitcher.propTypes = {
  t: PropTypes.func.isRequired,
}

export default withTranslation("Language")(LanguageSwitcher);
